<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.lb {
				width: 640px;
				margin: 10px auto;
				border: 1px solid #000;
				height: 300px;
			}
			
			#img {
				width: 640px;
				height: 300px;
			}
			
			#left-arrwo {
				position: relative;
				top: -200px;
				z-index: 999;
				display: inline-block;
			}
			
			#right-arrwo {
				position: relative;
				top: -200px;
				z-index: 999;
				right: -555px;
				display: inline-block;/*行内块元素*/
			}
			
			#img:hover {
				opacity: 0.5;
			}
			
			
			
			
			#num-btn span {
				display: inline-block;
				font-size: 20px;
				border: 1px solid #000000;
				width: 26.4px;
				text-align: center;
				border-radius: 50%;
				cursor: pointer;
				/*改变指针形状*/
				transition: all 0.1s;
				/*动画*/
				color: white;/*字体颜色*/
				
			}
			
			#num-btn span:hover {
				transform: scale(1.2);
				/*图标增大倍数*/
			}
			
			#num-btn {
				position: relative;
				top: -130px;
				margin-left: 340px;
			}
		</style>
	</head>

	<body>
		<div class="lb">
			<img src="img/1.jpg" id="img" />
			<img src="img/9.png" id="left-arrwo" />
			<img src="img/10.png" id="right-arrwo" />

			<div id="num-btn"><span style="background:#f00;">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></div><!--从开始的div到结束的div中间不能有空格否则会导致background的背景取值取不到-->
		</div>

		<script type="text/javascript">
			var left = document.getElementById("left-arrwo")
			var right = document.getElementById("right-arrwo")
			var img = document.getElementById("img")
			var index = 1;
			var btns = document.getElementById("num-btn").childNodes;//取num-btn中的孩子也就是span，但是回车也是num-btn的孩子，不去除回车背景娶不到值
			for(var i = 0; i < btns.length; i++) {//取出i
				btns[i].onclick = (function() {//点击图标转换图片
					var j = i + 1;
					return function() {//输出index
						index = j;
						img.src = "img/" + index + ".jpg"
						change();//改变时图标背景变成红色
					}
				})();
			}

			function change() {//改变图标背景颜色

				for(var i = 0; i < btns.length; i++) {
					btns[i].style.background = "";//原有的背景

				}
				btns[index - 1].style.background = "#f00";//替换的背景

			}
			var moveleft = function() {//点击左图标转换图片公用
				index++;
				if(index > 7) index = 1;
				img.src = "img/" + index + ".jpg"
				change();
			}
			var timer = setInterval(moveleft//每隔1秒自动换一次图片

				, 1000)

			right.onclick = moveleft//点击有图标向右滑动

			left.onclick = function() {//点击图标向左滑动图片

				index--;
				if(index < 1) index = 7;
				img.src = "img/" + index + ".jpg";
				change();
			}
			var lb = document.getElementsByClassName("lb")[0];//鼠标放在图片上清除自动换图片
			lb.onmouseover = function() {
				clearInterval(timer);
			}
			lb.onmouseout = function() {//鼠标移开恢复图片自动跳转
				timer = setInterval(moveleft, 1000)

			}
			
		</script>
	</body>

</html>